<template>
  <div class="personal-recom">
    <div class="swiper-wrapper">
      <!-- 轮播图 -->
      <el-carousel :interval="4000" type="card" :height="bannerHeight + 'px'">
        <el-carousel-item v-for="item in imgList" :key="item.imageUrl">
          <img
            class="img img-h swiper-img"
            :src="item.imageUrl"
            @click="toAllMusicList(item.id)"
          />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="play-list" v-if="!isLogin" >
      <h2 class="font-20 font-bold pointer">
        热门推荐 <i class="iconfont icon-arrow-right"></i>
      </h2>
      <ImgList :list="recSongList" type="playlist" @getRecommendId="toAllMusicList">
        <template v-slot="{ item }">
          <div class="text-hidden">
            {{ item.name }}
          </div>
        </template>
      </ImgList>
    </div>
    <div class="play-list" v-else >
      <h2 class="font-20 font-bold pointer">
        推荐歌单 <i class="iconfont icon-arrow-right"></i>
      </h2>
      <ImgList :list="recommendList" type="playlist" @getRecommendId="toAllMusicList">
        <template v-slot="{ item }">
          <div class="text-hidden">
            {{ item.name }}
          </div>
        </template>
      </ImgList>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { getBanner } from "@/api/api_other";
import { getPersonalized, getRecommend } from "@/api/api_playlist";
import ImgList from "@/components/list/ImgList.vue";
export default {
  components: {
    ImgList,
  },
  data() {
    return {
      imgList: [],
      recSongList: [],
      recommendList: [],
    };
  },
  created() {
    this.getImgList();
    this.getRecSongList(10);
  },
  watch: {
    isLogin: {
      immediate: true,
      handler() {
        if (this.isLogin) {
          this.getRecommend();
        } else {
          this.getRecSongList(10);
        }
      },
    },
  },
  computed: {
    ...mapState(["isLogin", "isPhone"]),
    bannerHeight() {
      return this.isPhone ? 130 : 260;
    },
  },
  methods: {
    /* 个性推荐页 */
    // 轮播图
    async getImgList() {
      const res = await getBanner();
      if (res.code !== 200) return;
      this.imgList = Object.freeze(res.banners);
    },
    // 未登录时,获取热门推荐歌单
    async getRecSongList(limit) {
      if (this.isLogin) return;
      const res = await getPersonalized(limit);
      if (res.code !== 200) return;
      this.recSongList = Object.freeze(res.result);
    },
    /* 登陆后,获取推荐歌单  */
    async getRecommend() {
      if (!this.isLogin) return;
      const res = await getRecommend();
      if (res.code !== 200) return;
      res.recommend.forEach((item) => {
        item.playCount = item.playcount;
        this.recommendList.push(Object.freeze(item));
      });
    },
    open(url) {
      if (url !== null) window.open(url);
    },
    toPlayListDetail(id) {
      if (typeof id === "number")
        this.$router.push({ path: "/playlistdetail/" + id });
    },
    toAllMusicList(id) {
      if(id >= 99990){
        this.$router.push({ path: "/allmusiclist/" ,query:{id:id}});
      }else{
        this.$router.push({ path: "/playlistdetail/" + id});
      }
    },
  },
};
</script>

<style lang="less" scoped>
.swiper-img {
  border-radius: 8px;
}
</style>
、
